<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏弹出效果</title>
		<style>
			/* 结合实际html结构--通配 */
			*{
				font: 16px "微软雅黑";
				/* 去掉外边距 */
				margin: 0;
				padding: 0;
				/* 无序列表：有样式--去一个样式:列表项 */
				list-style-type: none;
				/*  无序列表：有样式--【理解：简写】
				去全部去样式  list-style-tyle:去列表项样式
				             list-style-position 去掉列表项标记位置样式
				             list-style-image 去列表图片标记样式
				 */
				list-style: none;
			}
			/**
			 * 左栏效果
			 * 1.左栏空间区域【aside】  235*460 背景颜色
			 * 2.左栏区域内容【li】加权 235*50 相对定位--挂靠点【固定位置】
			 * 3.给每一个区域内容【li】 加鼠标移动上去改背景颜色
			 * 4.左栏弹出框：400*450 1像素边框 绝对定位-钩子-微调
			 */
			aside{
				width: 235px;
				height: 530px;
				background: #949494;
				margin: 20px 50px;
				}
				aside ul.sidebar li{
			    width: 235px;
			    height: 50px;
				/* 相对定位-挂靠点 */
				position: relative;
				text-align: left;
				line-height: 50px;
				color: #eee;
				top: 15px;
				/* 内边距：宽度增加 */
				padding-left: 30px;
				}
				aside ul.sidebar li:hover{
					background: #ff6700;
				}
			    aside ul.sidebar div.out{
				width: 400px;
				height: 450px;
				border: 1px solid red;
				position: absolute;
				left: 285px;
				/* 显示与隐藏 JavaScript 【jQuery框架】 */
				display: none;
				}
				 /*新型样式 */
				aside ul.sidebar li span{
					border: 1px solid red;
					float: right;
					/* 间隙：内边框 */
					padding-right: 50px;
					
				}
		</style>
		<script src="js/jquery-1.11.0.min.js"></script>
	</head>
	<body>
		<!-- html结构 结构化标记【语义化标签】 
		aside元素 针对：左栏、广告、弹出效果...有利于SEO优化
		之前版本通过div+id起别名方式【缺点：繁琐、定义起名、冗余】
		 -->
		<aside>
		  <ul class="sidebar">
			<!-- 弹出框 -->
			<div class="out"></div>
			  <li>手机 平板 电话卡 <span>></span></li>
			  <li>电视 盒子 <span>></span></li>
			  <li>路由器 智能硬件 <span>></span></li>
			  <li>移动电源 插线板 <span>></span></li>
			  <li>耳机 音箱 <span>></span></li>
			  <li>电池 存储卡 <span>></span></li>
			  <li>保护套 后盖 <span>></span></li>
			  <li>贴膜 其他配件 <span>></span></li>
			  <li>米兔 服装 <span>></span></li>
			  <li>箱包 其他周边 <span>></span></li>
		  </ul>
		</aside>
		<script>
			//左栏弹出与隐藏  .hover事件源+css函数
			//选择器：li
			$("aside ul.sidebar li").hover(function(){
				/*弹出框默认：隐藏--hover悬停第一件事：显示*/ 
				$("aside ul.sidebar div.out").css("display","block");
			},function(){
				$("aside ul.sidebar div.out").css("display","none");
			});
		</script>
	</body>
</html>

<!-- 事件源  .hover()   切换语法与css悬停hover一致
                       语法：.hover(function(){},function(){}) 
 --> 